<template>
	<div id="app">
		<template margin-left="0px">
		  <el-table :data="books" style="width: 100%">
			<el-table-column label="作品" width="80">
			  <template slot-scope="scope">
				  <img :src="scope.row.image" style="height: 80px;width: 60px;"/>
			  </template>
			</el-table-column>
			<el-table-column width="90">
			  <template slot-scope="scope">
				<span style="margin-left: 10px">{{ scope.row.bookName }}</span>
			  </template>
			</el-table-column>
			<el-table-column label="作品描述" width="280">
			  <template slot-scope="scope">
				<span style="margin-left: 10px">{{ scope.row.description }}</span>
			  </template>
			</el-table-column>
			<el-table-column label="作品状态" width="150">
			  <template slot-scope="scope">
				<i class="el-icon-magic-stick"></i>
				<span style="margin-left: 10px">{{ scope.row.status==1?"连载中":"已完结" }}</span>
			  </template>
			</el-table-column>
			<el-table-column label="最新更新" width="200">
			  <template slot-scope="scope">
				<el-popover trigger="hover" placement="top">
				  <p>最新更新时间: {{ scope.row.updateTime }}</p>
				  <p>作者开文时间: {{ scope.row.createTime }}</p>
				  <div slot="reference" class="name-wrapper">
					<el-tag size="medium">{{ scope.row.updateTime }}</el-tag>
				  </div>
				</el-popover>
			  </template>
			</el-table-column>
			<el-table-column label="操作">
			  <template slot-scope="scope" >
				<el-button type="danger" @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete" circle></el-button>
			  </template>
			</el-table-column>
		  </el-table>
		</template>
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
	  name: 'app',
	  data () {
	    return {
	      books: []
	    }
	  },
	  methods:{
		  select:function(){
				var _this=this;
				$.ajax({
					url:"http://localhost/collection/"+sessionStorage.getItem("userId"),
					type:"get",
					contentType:"application/json;charset=utf-8",
					success:function(data){
						_this.books=data;
					}
				});
		  },
		  handleDelete(index, row) {
			    console.log(index, row);
				console.log(row.bookId,row.authorId);
				var _this=this;
				$.ajax({
					url:"http://localhost/collection",
					type:"delete",
					data:{bid:row.bookId,uid:sessionStorage.getItem("userId")},
					success:function(data){
						console.log(data)
						if(data!='0'){
							alert("删除成功！");
							_this.select();
						}
					}
				}); 
		  },
	  },
	  created() {
	  	this.select();
	  }
	}
</script>

<style>
</style>
